<template>
  <div class="loader" :style="{
    borderTopColor: '#1890ff',
    width: size + 'px',
    height: size + 'px'
  }"></div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 30
    }
  }
}
</script>

<style scoped>
.loader {
  animation: spin 0.8s linear infinite;
  @apply rounded-full border-4 border-[#f3f3f3];
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>